<%@page import="java.util.List"%>
<%@page import="com.wanmait.cookbook.vo.Pager"%>
<%@page import="com.wanmait.cookbook.vo.Works"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String path=request.getContextPath(); %>
    <div id="content">
    <ul class="cook-list clearfix">
    <%
    List<Integer> worksLikeCount = (List<Integer>)request.getAttribute("worksLikeCount");
    List<Works> works = (List<Works>)request.getAttribute("works");
    for(int i=0;i<works.size();i++) {
    if((i+1)%3!=0){
    %>
        <li class="left ">
             <a class="cook-img relative" href="<%=path %>/HotWorksServlet?action=showWorks&worksId=<%=works.get(i).getId() %>" target="_blank">
               <img src="<%=path %>/static/image/<%=works.get(i).getPic() %>" alt="<%=works.get(i).getTitle()%>">
             </a>
             <a class="cookname" href="<%=path %>/HotWorksServlet?action=showWorks&worksId=<%=works.get(i).getId() %>" target="_blank"><%=works.get(i).getTitle()%></a>
             <p><i class="read">❤</i> <span><%=worksLikeCount.get(i) %></span><i class="star"></i> <span></span></p>
        </li>
       <%}else{ %>
             <li class="left  three ">
             <a class="cook-img relative" href="<%=path %>/HotWorksServlet?action=showWorks&worksId=<%=works.get(i).getId() %>" target="_blank">
               <img src="<%=path %>/static/image/<%=works.get(i).getPic() %>" alt="<%=works.get(i).getTitle()%>">
             </a>
             <a class="cookname" href="<%=path %>/HotWorksServlet?action=showWorks&worksId=<%=works.get(i).getId() %>" target="_blank"><%=works.get(i).getTitle()%></a>
             <p><i class="read" ">❤</i> <span>：<%=worksLikeCount.get(i) %></span><i class="star"></i> <span></span></p>
        </li>
       
       <%} }%>
            </ul>
            </div>
    <!-- 显示数字开始 -->
      <div id="cookbookPager" class="pages">
        <%
            Pager pager =(Pager)request.getAttribute("pager");
            int start=1;
            int end=pager.getPageCount();
            if(pager.getPageCount()>5){
              start=pager.getPageNo()-2<1?1:pager.getPageNo()-2;
              end=start+4;
              if(end>pager.getPageCount()){
                end=pager.getPageCount();
                start=end-4;
              }
            }
            %>
            <a href="javascript:void(0)" class="prevPager" one-link-mark="yes">上一页</a>
            <%
            for(int i=start;i<=end;i++){
            if(i==pager.getPageNo()){
              %><a href="javascript:void(0)" style="color:red" class="aliaon" one-link-mark="yes"><%=i %></a>
          <%   }else{%>
            <a href="javascript:void(0)" class="aliaon" one-link-mark="yes"><%=i %></a>
            <% }  
            }%>
        <a href="javascript:void(0)" class="nextPager" one-link-mark="yes">下一页</a>
        <a href="javascript:void(0)" class="aliaon" one-link-mark="yes"><%=pager.getPageNo()%>/<%=pager.getPageCount() %></a>
     </div>
     <!-- 上下页事件开始 -->
<script type="text/javascript">
$(function(){
  //上一页点击事件
  $(".prevPager").click(function(){
    var n=<%=pager.getPageNo()%>;
    $.ajax({
      url:"<%=path%>/PersonalServlet",
      data:{action:"myWorksAjax",pageNo:n-1},
      success:function(mes){
        $("#content").html(mes);
      }
      
    });
  });
  //下一页点击事件
  $(".nextPager").click(function(){
    var n=<%=pager.getPageNo()%>;
    $.ajax({
      url:"<%=path%>/PersonalServlet",
      data:{action:"myWorksAjax",pageNo:n+1},
      success:function(mes){
        $("#content").html(mes);
      }
    });
  });

})
</script>  
<!--上下页事件结束  -->   
<!--给数字添加点击事件  -->
<script type="text/javascript">
$(function(){
  $("#content").on("click",".aliaon",function(){
    $(".aliaon").css("color","black");//所有的数字变成黑色
    $(this).css("color","orange");
    var n=$(this).html();
    $.ajax({
      url:"<%=path%>/PersonalServlet",
      data:{action:"myWorksAjax",pageNo:n},
      success:function(mes){
        $("#content").html(mes);
      }
      
    });
  });
});
</script>